<template>
  <div class="editor_contianer">
     <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
    />
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css"
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { baseUrl } from "../utils/config";
import { getToken } from "../utils/storage";
let initFinished = false;
export default {
    components: { Editor, Toolbar },
      
    // 组件数据双向绑定
    model:{
        prop: 'editValue',
        event: "update:editValue",
    },
    props:{
        editValue: {
            type: String,
            default: '',
        } 
    },
    data() {
        return {
            editor: null,
            valueHtml: '',
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                /* 隐藏哪些菜单 */ 
                excludeKeys: [
                    // 上传视频隐藏
                    "uploadVideo"
                ],
            },
            editorConfig: {
                placeholder: "请输入内容...",
                autoFocus: false,

                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + '/editor_upload',
                        base64LimitSize: 10 * 1024, // 10kb 以下的图片以文本形式保存
                        headers: {
                            token: getToken(),
                        },
                    },
                    insertImage: {
                        // 插入图片前执行
                       parseImageSrc: (src) => {
                            console.log(src,"parseImageSrc");

                            if (src.indexOf('base64') !== -1) {
                                return src
                            } else if (src.indexOf('http') === -1) {
                                return `${baseUrl}${src}`
                            }
                            return src;
                       }, 
                    }
                },
            },
            mode: 'default', // or 'simple'
        }
    },
    computed: {
        isUpdate() {
            return this.$route.path.endsWith('/update')
        },
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            if (initFinished) {
                this.$emit("update:editValue", this.valueHtml)
            }
        },
        clearAll() {
            this.editor.clear()
        }
    },
    mounted() {
        // 创建富文本编辑器时，会调用onChange事件
        // 再掉用mounted，设置定时器延迟赋值，避免值被覆盖
        setTimeout(() => {
            this.valueHtml = this.editValue;
            initFinished = true
        }, 100);
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>


<style lang="scss" scoped>
.editor_contianer {
    border: 1px solid #ccc;
}
</style>